<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<link rel="stylesheet" href="dianying/font-awesome.css?v=1.0" type="text/css">
<link rel="stylesheet" href="dianying/hdmoli-ui.css?v=1.10" type="text/css">
<link rel="stylesheet" href="dianying/hdmoli-site.css?v=1.3" type="text/css">
<link rel="stylesheet" href="dianying/layer.css" type="text/css">
<link rel="stylesheet" href="dianying/hdmoli-color3.css?v=1.1" type="text/css">

<script type="text/javascript" src="ckplayer/hls.js/hls.min.js"></script>
<link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
<script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
<body>
<div class="video" style="width: 600px;height: 400px;">播放器容器</div>
<script type="text/javascript">
  var videoObject = {
    container: '.video', //容器的ID或className
    plug:'hls.js'//设置使用hls插件

  };

  var player = new ckplayer(videoObject);//初始化播放器
  function play_init(url){
    videoObject.video=url;
    player== new ckplayer(videoObject);
  }
</script>
<div class="container">
  <div class="row">
    <div class="padding-0">
      <div class="myui-panel myui-panel-bg clearfix">
        <div class="myui-panel-box clearfix">
          <div class="hy-layout clearfix" style="text-align: center;">

          </div>
          <div class="myui-panel_hd">
            <div class="myui-panel__head active bottom-line clearfix">
              <a class="more sort-button pull-right" href="javascript:;"><i class="fa fa-sort-amount-asc"></i> 排序</a>
              <h3 class="title">
                播放地址
              </h3>
              <ul class="nav nav-tabs active">
                <li class="active"><a href="#playlist2" data-toggle="tab">线路1</a></li>
                <li><a href="#playlist1" data-toggle="tab">线路2</a></li>
              </ul>
            </div>
          </div>
          <div class="tab-content myui-panel_bd">
            <div id="playlist2" class="tab-pane fade in clearfix active">
              <p class="text-muted col-pd">
                影片采用了外挂字幕，如看不到字幕，请换用Edge、Chrome或Firefox浏览器播放
              </p>
              <ul class="myui-content__list sort-list clearfix" style="max-height: 600px; overflow: auto;">
                #for(dy:dylist)
                <li id="10" class="col-md-8 col-sm-6 col-xs-4"><a title="第#(for.index)集" href="javascript:play_init('#(dy)')" target="_self" class="btn btn-gray">第#(for.index)集</a></li>
                #end
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
